<template>
  <!-- 批量修改卡标签页面 -->
  <div>
    <el-card class="box-card">
      <div class="horoscope-list">
        <span>{{ handleTitle }}</span>
      </div>
      <el-divider />
      <el-form
        ref="form"
        :inline="true"
        :model="queryForm"
        @submit.native.prevent
      >
        <el-form-item prop="last_no">
          <el-input v-model="queryForm.last_no" placeholder="请输入卡后四位" />
        </el-form-item>
        <el-form-item prop="cardbin">
          <el-select v-model="queryForm.cardbin" placeholder="请选择卡段">
            <el-option
              v-for="item in cardBinList"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </el-form-item>
        <el-form-item prop="label">
          <el-select
            v-model="queryForm.label"
            clearable
            placeholder="请选择标签"
          >
            <el-option
              v-for="item in labelList"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </el-form-item>
        <el-form-item prop="last_no">
          <el-input
            v-model="queryForm.wholename"
            placeholder="请输入持卡人姓名"
          />
        </el-form-item>
        <el-form-item prop="createTime">
          <el-date-picker
            v-model="queryForm.createTime"
            end-placeholder="结束日期"
            :picker-options="pickerOptions"
            range-separator="至"
            start-placeholder="开始日期"
            type="daterange"
            value-format="yyyy-MM-dd"
          />
        </el-form-item>
        <el-form-item>
          <el-button
            icon="el-icon-search"
            native-type="submit"
            type="purple"
            @click="handleQuery"
          >
            查询
          </el-button>
          <el-button
            icon="el-icon-search"
            native-type="submit"
            type="default"
            @click="resetList"
          >
            重置
          </el-button>
        </el-form-item>
      </el-form>
      <el-table
        ref="tableSort"
        v-loading="listLoading"
        :border="border"
        :data="list"
        :select-data="selectData"
        :size="lineHeight"
        :stripe="stripe"
        @select="select"
        @selection-change="selectionChange"
      >
        <el-table-column align="center" type="selection" width="55" />
        <el-table-column
          v-for="(item, index) in finallyColumns"
          :key="index"
          align="center"
          :label="item.label"
          :prop="item.prop"
          row-key="id"
          :sortable="item.sortable"
          :width="item.width"
        >
          <template #default="{ row }">
            <el-tag
              v-if="item.label === '卡片状态'"
              :type="
                row.status == 1
                  ? 'success'
                  : row.status == 0
                  ? 'danger'
                  : 'info'
              "
            >
              {{ row.status_text }}
            </el-tag>
            <span v-else>{{ row[item.prop] }}</span>
          </template>
        </el-table-column>
        <el-table-column
          align="center"
          label="操作"
          show-overflow-tooltip
          width="220"
        >
          <template #default="{ row }">
            <el-button type="text" @click="goCardDetail(row)">详情</el-button>
          </template>
        </el-table-column>
        <template #empty>
          <el-image
            class="vab-data-empty"
            :src="require('@/assets/empty_images/data_empty.png')"
          />
        </template>
      </el-table>
      <el-pagination
        background
        :current-page="queryForm.page"
        :layout="layout"
        :page-size="queryForm.limit"
        :total="total"
        @current-change="handleCurrentChange"
        @size-change="handleSizeChange"
      />
      <!-- 修改卡标签 -->
      <div v-if="command === 'label'" class="bottomMsg">
        <div class="d-flex number">
          <h3 class="h3">
            已选中卡数：
            <span class="span">{{ selectNum }}</span>
          </h3>
          <h3 class="h3 ml-24">
            卡内可用余额：
            <span class="span">{{ '$' + selectCount }}</span>
          </h3>
        </div>
        <div class="changeLabel">
          <h3 class="h3 mt-16">修改卡标签为</h3>
          <el-input
            v-model="cardLabel"
            class="input mt-12"
            placeholder="请输入新标签名"
          />
        </div>
        <div>
          <button
            class="button-004 button-004--primary w-140 mt-36"
            @click="confirmUpdate"
          >
            <span>确认修改</span>
          </button>
        </div>
      </div>
      <!-- 销卡 -->
      <div v-if="command === 'delete'" class="bottomMsg">
        <div class="d-flex number">
          <h3 class="h3">
            已选中卡数：
            <span class="span">{{ selectNum }}</span>
          </h3>
        </div>
        <div>
          <button
            class="button-004 button-004--primary w-140 mt-36"
            @click="confirmDelete"
          >
            <span>确认删除</span>
          </button>
        </div>
      </div>
      <!-- 划转 -->
      <div v-if="command === 'transfer'" class="bottomMsg">
        <div class="d-flex number">
          <h3 class="h3">
            已选中卡数：
            <span class="span">{{ selectNum }}</span>
          </h3>
          <h3 class="h3 ml-24">
            卡内可用余额：
            <span class="span">{{ '$' + selectCount }}</span>
          </h3>
        </div>
        <div>
          <button
            class="button-004 button-004--primary w-140 mt-36"
            @click="confirmTransfer"
          >
            <span>下一步</span>
          </button>
        </div>
      </div>
      <!-- 修改卡标签弹框 -->
      <hsk-dialog
        :center="false"
        :close-on-click-modal="false"
        custom-class="custom-dialog"
        :show-footer="false"
        title="提示"
        :visible.sync="dialogVisible1"
        width="500px"
      >
        <el-divider border-style="dashed" />
        <div class="dialog-main">
          <img
            alt=""
            class="dialog-main-icon"
            src="@/assets/image/icon-error-bg.png"
          />
          <p class="dialog-main-title">修改后的卡标签为：{{ cardLabel }}</p>
        </div>
        <div class="dialog-footer">
          <button
            class="button-004 button-004--primary"
            :loading="loading"
            type="primary"
            @click="handleUpdate"
          >
            确认修改
          </button>
          <button
            class="button-004 button-004--secondary button-004--large"
            :loading="loading"
            @click="dialogVisible1 = false"
          >
            取消
          </button>
        </div>
      </hsk-dialog>
      <!-- 划出弹框 -->
      <hsk-dialog
        :center="false"
        :close-on-click-modal="false"
        custom-class="custom-dialog"
        :show-footer="false"
        title="提示"
        :visible.sync="dialogVisible2"
        width="500px"
      >
        <el-divider border-style="dashed" />
        <div class="dialog-main">
          <img
            alt=""
            class="dialog-main-icon"
            src="@/assets/image/icon-error-bg.png"
          />
          <p class="dialog-main-title">可划转余额：{{ '$' + selectCount }}</p>
          <p class="dialog-main-title">每张卡最低留存余额1美元</p>
        </div>
        <div class="dialog-footer">
          <button
            class="button-004 button-004--primary"
            :loading="loading"
            type="primary"
            @click="handleTransfer"
          >
            确认划转
          </button>
          <button
            class="button-004 button-004--secondary button-004--large"
            :loading="loading"
            @click="dialogVisible2 = false"
          >
            取消
          </button>
        </div>
      </hsk-dialog>
      <!-- 销卡弹框 -->
      <hsk-dialog
        :center="false"
        :close-on-click-modal="false"
        custom-class="custom-dialog"
        :show-footer="false"
        title="提示"
        :visible.sync="dialogVisible3"
        width="500px"
      >
        <el-divider border-style="dashed" />
        <div class="dialog-main">
          <img
            alt=""
            class="dialog-main-icon"
            src="@/assets/image/icon-error-bg.png"
          />
          <p class="dialog-main-title">是否进行销卡操作</p>
        </div>
        <div class="dialog-footer">
          <button
            class="button-004 button-004--primary"
            :loading="loading"
            type="primary"
            @click="handleDelete"
          >
            确认销卡
          </button>
          <button
            class="button-004 button-004--secondary button-004--large"
            :loading="loading"
            @click="dialogVisible3 = false"
          >
            取消
          </button>
        </div>
      </hsk-dialog>
    </el-card>
  </div>
</template>

<script>
  import {
    getLabelList,
    getCardBinds,
    getCardListHeader,
    getCardList,
    updateLabel,
  } from '@/api/card'
  // import VabDraggable from 'vuedraggable'
  import { mapGetters } from 'vuex'
  export default {
    name: 'HandlePage',
    components: {
      // VabDraggable,
    },
    data() {
      return {
        handleTitle: null,
        command: null,
        selectData: [],
        selectNum: 0,
        selectCount: 0,
        cardLabel: null,
        dialogVisible1: false, // 改标签
        dialogVisible2: false, //  划转
        dialogVisible3: false, // 删除
        cardList: null,
        border: false,
        height: this.$baseTableHeight(1),
        stripe: false,
        lineHeight: 'medium',
        checkList: [
          '卡号',
          '持卡人',
          '有效期',
          '安全码',
          '标签',
          '卡片状态',
          '累计消费($)',
          '可用余额($)',
          '操作',
        ],
        columns: [
          {
            label: '卡号',
            width: 'auto',
            prop: 'api_card_no',
          },
          {
            label: '持卡人',
            width: 'auto',
            prop: 'wholename_text',
          },
          {
            label: '有效期',
            width: '200',
            prop: 'api_card_expire',
          },
          {
            label: '安全码',
            width: 'auto',
            prop: 'api_card_cvv',
          },
          {
            label: '标签',
            width: 'auto',
            prop: 'label',
          },
          {
            label: '卡片状态',
            width: 'auto',
            prop: 'status_text',
          },
          {
            label: '累计消费($)',
            width: 'auto',
            prop: 'total_cost',
          },
          {
            label: '可用余额($)',
            width: 'auto',
            prop: 'current_balance',
          },
        ],
        list: [],
        listLoading: true,
        loading: false,
        layout: '->,total, sizes, prev, pager, next, jumper',
        total: 0,
        selectRows: '',
        queryForm: {
          page: 1,
          limit: 10,
          createTime: [],
          trade_id: '',
          last_no: '',
          type: '',
          status: '',
          label: '',
          wholename: '',
          card_id: '',
        },
        cardBinList: null,
        labelList: null,
        headerList: null,
        tabIndex: null,
        pickerOptions: {
          disabledDate(date) {
            return date.getTime() > Date.now()
          },
        },
      }
    },
    computed: {
      dragOptions() {
        return {
          animation: 600,
          group: 'description',
        }
      },
      finallyColumns() {
        return this.columns.filter((item) =>
          this.checkList.includes(item.label)
        )
      },
      ...mapGetters({
        infoDetail: 'user/infoDetail',
      }),
    },
    created() {
      this.command = this.$route.query.command
      this.handleTitle = this.$route.query.title
      this.getCardHeader()
      this.getCardBinList()
      this.getlabelList()
    },
    methods: {
      setSelectRows(val) {
        this.selectRows = val
      },
      handleSizeChange(val) {
        this.queryForm.limit = val
        this.fetchData()
      },
      handleCurrentChange(val) {
        this.queryForm.page = val
        this.fetchData()
      },
      handleQuery() {
        this.queryForm.page = 1
        this.fetchData()
      },
      async fetchData() {
        this.listLoading = true
        this.queryForm = Object.assign(this.queryForm, {
          createtime: this.queryForm.createTime
            ? this.queryForm.createTime.join('~')
            : '',
        })
        const {
          data: { data, total },
        } = await getCardList(this.queryForm)
        this.list = data
        this.total = total
        this.listLoading = false
      },
      async getCardBinList() {
        let query = { type: 3 }
        const { data } = await getCardBinds(query)
        if (data) {
          this.cardBinList =
            data.map((item) => ({
              label: item,
              value: item,
            })) || []
        }
      },
      async getlabelList() {
        const {
          data: { data },
        } = await getLabelList()
        if (data) {
          this.labelList =
            data.map((item) => ({
              label: item.label,
              value: item.label,
            })) || []
        }
      },
      async getCardHeader() {
        const { data } = await getCardListHeader()
        if (data) {
          this.headerList = data || []
          this.tabIndex = data[0].name
          this.queryForm.status = data[0].type
          this.fetchData()
        }
      },
      handleChangeHeader(val) {
        this.queryForm.status = this.headerList[val.index - 0].type
        this.resetList()
      },
      resetList() {
        this.queryForm.page = 1
        this.$refs.form.resetFields()
        this.fetchData()
      },
      // 返回
      goBack() {
        this.$router.back()
      },
      // 星座卡详情
      goCardDetail(row) {
        this.$router.push({
          name: 'prepaidCardDetail',
          query: { id: row.api_card_id },
        })
      },
      select(selection, row) {
        if (selection.length === 0) {
          this.selectData = []
          this.selectNum = 0
          this.selectCount = 0
        } else {
          let arr = []
          arr.push(row)
          this.selectData = new Set([...arr])
          this.selectCount = selection.reduce(
            (accumulator, currentValue) =>
              accumulator + parseFloat(currentValue.current_balance),
            0
          )
        }
      },
      selectionChange(selection) {
        if (selection.length === 0) {
          this.selectData = []
        } else {
          //  去重
          this.selectData = Array.from(
            new Set([...selection].map(JSON.stringify))
          ).map(JSON.parse)
          this.selectNum = this.selectData.length
        }
      },
      // 修改卡弹窗
      confirmUpdate() {
        if (this.selectData.length === 0) {
          this.$message.error('请选择要修改标签的卡')
        } else {
          this.dialogVisible1 = true
        }
      },
      // 确认修改卡标签
      async handleUpdate() {
        let arr = []
        this.selectData.forEach((item) => {
          arr.push(item.api_card_id)
        })
        const data = {
          api_card_id: arr.join(','),
          label: this.cardLabel,
        }
        const { code, msg } = await updateLabel(data)
        if (code === 1) {
          this.dialogVisible1 = false
          this.cardLabel = null
          this.$message.success(msg)
          this.fetchData()
        } else {
          this.$message.error(msg)
        }
      },
      // 划转卡弹窗
      confirmTransfer() {
        if (this.selectData.length === 0) {
          this.$message.error('请选择要划转的卡')
        } else {
          this.dialogVisible2 = true
        }
      },
      // 确认划转
      handleTransfer() {},
      // 删除卡弹窗
      confirmDelete() {
        if (this.selectData.length === 0) {
          this.$message.error('请选择要删除的卡')
        } else {
          this.dialogVisible3 = true
        }
      },
      // 确认删除
      handleDelete() {},
    },
  }
</script>

<style lang="scss" scoped>
  .custom-table-container {
    :deep() {
      i {
        cursor: pointer;
      }
    }

    .stripe-panel,
    .border-panel {
      margin: 0 10px #{$base-margin/2} 10px !important;
    }
  }
  .balance_box {
    position: relative;
    margin-bottom: 30px;
    overflow: hidden;
    background-image: url('../../../../assets/image/home/balance_bg.png');
    background-repeat: repeat-x;
    background-position: left;
    background-size: 100%;
  }
  .balance_title {
    position: relative;
    padding-left: 10px;
    border-left: 4px solid #fff;
  }
  .chongzhi_btn {
    width: 203px;
    height: 56px;
    font-size: 18px;
    font-style: normal;
    font-weight: 500;
    line-height: 56rpx;
    color: #6b1ce9;
    text-align: center;
    background: #ffffff;
    border-radius: 28px;
  }
  .custom-table-checkbox {
    [class*='ri'] {
      vertical-align: -2.5px;
      cursor: pointer;
    }

    .el-checkbox {
      margin: 5px 0 5px 8px;
    }
  }
  .horoscope-list {
    padding: 0 10px;
    margin-bottom: 20px;
    border-left: 4px solid #6b1ce9;
    span {
      font-size: 18px;
      font-weight: 700;
      color: #000;
    }
  }
  .bottomMsg {
    .h3 {
      font-size: 20px;
      color: #000;
      .span {
        font-size: 18px;
        color: #6b1ce9;
      }
    }
    .input {
      width: 250px;
      // height: 50px;
    }
  }

  .dialog-main {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    margin-bottom: 40px;
    .dialog-main-icon {
      width: 80px;
      height: 74px;
    }
    .dialog-main-title {
      font-size: 16px;
      color: #333333;
      margin-top: 16px;
    }
    .dialog-main-info {
      font-size: 14px;
      color: #333333;
      margin-top: 16px;
    }
  }

  .dialog-footer {
    display: flex;
    justify-content: space-around;
  }
  ::v-deep .el-table__body-wrapper .is-scrolling-none {
    height: 500px !important;
  }
</style>
